<template>
	<!--我要发稿-->
	<div class="contribution">
		<!--收藏点赞点击弹框-->
		<CompIcon v-if="compIconShow" :compIconContent="compIconContent"/> 
		<h4>
			<router-link to="/sendIndex" target="_blank">
				我要发稿
			</router-link>
		</h4>
		<div class="contribution-content">
			<div  v-for="(item, index) in contrContent" :key="index" v-if="index>=contStart&&index<=contEnd" >
				<div class="contribution-list">
					<i class="delete-icon" @click="delectData(index)">x</i>
					<NavListDetComp :detailContent="item" @popContent="popContent"/>
				</div>
			</div>
			<div class="paging">
				<Paging :pages="pages" @pageData="pageData"/>
			</div>
		</div>
		<div class="delete-pop" :style="popStyle" v-if="isDelete">
			<div class="delete-content" :style="deleteStyle">
				<i></i>
				<p>删除后将无法找回，是否删除？</p>
				<div>
					<a href="javascript:;" class="isShow" @click="yesDelete">是</a>
					<a href="javascript:;" @click="noDelete">否</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import NavListDetComp from '@/components/navDetails/navListDetComp'
  // 分页
  import Paging from '@/components/public/paging'
  // 子路由中点赞和收藏组件
  import CompIcon from '@/components/public/compIcon'
  export default {
  	components: {
  	  NavListDetComp,
  	  Paging,
  	  CompIcon
  	},
  	data () {
      return {
        contrContent: [], // list内容
        contrNum: 10, // 一个页面加载多少条数据
        contStart: 0, // 当前页的第一条数据
        contEnd: 9, // 当前页的最后一条数据
        pages: null, // 总共多少页
        isDelete: false, // 是否出现删除的弹框
        numOne: null, //删除第几条
        popStyle: { // 弹框背景颜色的大小
          width: '400px',
          height: '390px'
        },
        deleteStyle: { // 是否删除的弹框位置
          marginTop: '200px',
          marginLeft: '200px'
        },
		compIconContent: '', // CompIcon的内容
		compIconShow: false // compIcon是否显示
      }
  	},
  	created () {
  		var that = this
  		that.$http.get('../../../../static/json/navListDetail.json')
		.then(res => {
			var data = res.data.data
			for (var i = 0 , l = data.length ; i < l ; i++) {
				var contentLength = data[i].content.length
				if (contentLength > 60) {
					data[i].content = data[i].content.substring(0,61)+"..."
				}
			}
			that.pages = Math.ceil(data.length / that.contrNum)
			that.contrContent = JSON.parse(JSON.stringify(data))
		})
		.catch(error => {
			console.log(error)
		})
  	},
  	methods: {
  		// 点击删除按钮
  		delectData (index) {
  			this.isDelete = true
  			this.numOne = index
  		},
  		// 不删除
  		noDelete () {
  			this.isDelete = false
  		},
  		// 删除
  		yesDelete () {
  			var that = this
			that.contrContent.splice(that.numOne,1)
			that.pages = Math.ceil(that.contrContent.length / that.contrNum)
			that.isDelete = false
  		},
  		// 从分页子组件从来的参数，处理当前页面的应该是那些数据
  		pageData (value) {
  			var that = this
  			that.contStart = that.contrNum*(value-1)
            that.contEnd = that.contrNum*value-1
  		},
  		// 从contribution子组件传来的参数，用来处理
  		popContent (value) {
  			var that = this
  			that.compIconContent = value
  			that.compIconShow = true
  			setTimeout (function () {
  				that.compIconShow = false
  			},3000)
  		}
  	},
  	mounted () {
      var that = this
      function changeShiTu (shiTu) {
        var stWidth = window.innerWidth
        var stHeight = window.innerHeight
        var marTop = stHeight / 2 - 125
        var marLeft = stWidth / 2 - 182
        shiTu.popStyle.width = stWidth + 'px'
        shiTu.popStyle.height = stHeight + 'px'
        shiTu.deleteStyle.marginTop = marTop + 'px'
        shiTu.deleteStyle.marginLeft = marLeft + 'px'
      }
      changeShiTu(that)
      window.onresize = function () {
        changeShiTu(that)
      }
    },
  }
</script>

<style scoped>
	@import "../../../../../static/knowChilde/contribution.css";
</style>